<%--
  Created by IntelliJ IDEA.
  User: 惜
  Date: 2025/1/2
  Time: 9:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        .page {
            display: flex;
            justify-content: center;
        }
        #roomAdminListShow {
            width: 50vw;
            min-width: 300px;
        }
        #fixed {
            display: flex;
            justify-content: center;
        }
        #detailed {
            width: 100%;
            height: 500px;
            background-color: #f9f9f9;
            position: relative;
        }
        #ctrlBtn {
            width: 100%;
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            height: 60px;
            line-height: 60px;
        }
        #search {
            display: inline-block;
        }
    </style>
</head>
<body>
<jsp:include page="/nav.jsp"/>
    <div id="search">
        <input type="text" id="search_input" />
        <button id="searchBtn" type="button">搜索</button>
    </div>
    <div id="fixed">
        <div>
            <table id="roomAdminListShow">
            </table>
        </div>

        <div id="detailed">
            <p><label>stucode: </label><label class="detailedInfo"></label></p>
            <p><label>name: </label><input type="text" class="detailedInfo" /></p>
            <p><label>gender: </label><input type="text" class="detailedInfo" /></p>
            <p><label>password: </label><input type="text" class="detailedInfo" /></p>
            <p><label>phone: </label><input type="text" class="detailedInfo" /></p>
            <p>
                <label>role: </label>
                <select class="detailedInfo">
                    <option value="0">学生</option>
                    <option value="1">宿管</option>
                    <option value="2">超级管理员</option>
                </select>
            </p>
            <p><label>buildingsCard: </label><label class="detailedInfo"></label></p>
            <p><label>roomsCard: </label><label class="detailedInfo"></label></p>

            <div id="ctrlBtn">
                <button class="ctrl">修改</button>
                <button class="ctrl">删除</button>
            </div>
        </div>
    </div>

    <div class="page">
        <span>
            <label>页码</label>
            <select id="pages">
                <option value="1">1</option>
            </select>
            <label>页数</label>
            <select id="pageNum">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
            </select>
        </span>
    </div>
</body>
<script type="text/javascript">
    let pageNum = document.querySelector("#pageNum");
    let pages = document.querySelector("#pages");
    let searchBtn = document.querySelector("#searchBtn");
    let searchText = document.querySelector("#search_input");
    let table = document.querySelector("#roomAdminListShow");
    let detailed = document.querySelector("#detailed");
    let detailItem = document.querySelectorAll(".detailedInfo")
    let ctrlBtn = document.querySelectorAll(".ctrl")

    let currentUser = {}

    searchBtn.onclick = function () {
        getList((Number(pages.value)-1) * Number(pageNum.value), pageNum.value, searchText.value)
    }

    function submitCheck(url) {
        if (confirm("你确定吗?")) {
            let ajax = new XMLHttpRequest();
            ajax.open("POST", url);
            ajax.setRequestHeader("Context-type", 'x-from-xxx-urlencoded')

            ajax.onreadystatechange = function () {
                if (ajax.readyState === 4 && ajax.status === 200) {
                    let data = JSON.parse(ajax.responseText);
                    alert(data['status'] === 1 ? "操作成功, 请等待审核": data['message'])
                } else {
                    alert("提交失败")
                }
            }

            currentUser['stucode'] = detailItem[0].innerText
            currentUser['name'] = detailItem[1].value
            currentUser['gender'] = detailItem[2].value
            currentUser['password'] = detailItem[3].value
            currentUser['phone'] = detailItem[4].value
            currentUser['phone'] = detailItem[4].innerText
            currentUser['role'] = detailItem[5].value
            currentUser['buildingsCard'] = detailItem[6].innerText
            currentUser['roomsCard'] = detailItem[7].innerText

            ajax.send(JSON.stringify(currentUser))
        }
    }

    ctrlBtn[0].onclick = () => submitCheck("/JavaWebStudentManager/room/manage/update")
    ctrlBtn[1].onclick = () => submitCheck("/JavaWebStudentManager/room/manage/delete")

    pages.onchange = function() {
        getList((Number(this.value)-1) * Number(pageNum.value), pageNum.value)
    }

    pageNum.onchange = function() {
        let pageTotal = <%=request.getAttribute("pageTotal")%>;
        let pagesList = Math.ceil(pageTotal / pageNum.value);

        let pagesDom = "";
        for (let i = 1;i <= pagesList;i += 1) {
            pagesDom += "<option value='"+i+"'>"+i+"</option>"
        }

        pages.innerHTML = pagesDom
        getList((Number(pages.value)-1) * Number(pageNum.value), pageNum.value, null)
    }

    function showDetailed(id) {
        let ajax = new XMLHttpRequest();
        ajax.open("GET", "/JavaWebStudentManager/room/manage/detailed?stucode="+id);

        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4 && ajax.status === 200) {
                let data = JSON.parse(ajax.responseText)['data']
                detailItem[0].innerText = data['stucode']
                detailItem[1].value = data['name']
                detailItem[2].value = data['gender']
                detailItem[3].value = data['password']
                detailItem[4].value = data['phone']
                // detailItem[5].innerText = data['role']
                detailItem[5].value = data['role'];
                detailItem[6].innerText = data['buildingsCard']
                detailItem[7].innerText = data['roomsCard']
            }
        }

        ajax.send()
    }

    function getList(pages, pageNum, searchText) {
        let ajax = new XMLHttpRequest();
        ajax.open("GET", "/JavaWebStudentManager/room/manage/room_manage_list?pages="+pages+"&pageNum="+pageNum+"&searchText="+searchText)

        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4 && ajax.status === 200) {
                let data = JSON.parse(ajax.responseText)['data']
                let tableItem = `<tr>
            <th>姓名</th>
            <th>性别</th>
            <th>身份</th>
            <th>操作</th>
        </tr>`;
                for (let item of data) {
                    tableItem += "<tr>" +
                        "<td>" + item.name + "</td>" +
                        "<td>" + item.gender + "</td>" +
                        "<td>" + item.role + "</td>" +
                        "<td><a href='javascript:showDetailed("+item.stucode+")'>查看详情</a><br />"
                        + "</tr>"
                }

                table.innerHTML = tableItem
            }
        }

        ajax.send()
    }

    window.onload = function() {
        pageNum.onchange()
    }
</script>
</html>
